
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/img/basic/favicon.ico" type="image/x-icon">
    <title>Paper</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        .loader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F5F8FA;
            z-index: 9998;
            text-align: center;
        }

        .plane-container {
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
    <!-- Js -->
    <!--
    --- Head Part - Use Jquery anywhere at page.
    --- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
    -->
    <script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>
</head>
<body class="light">
<!-- Pre loader -->
<div id="loader" class="loader">
    <div class="plane-container">
        <div class="preloader-wrapper small active">
            <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>
        </div>
    </div>
</div>
<div id="app">
<aside class="main-sidebar fixed offcanvas shadow" data-toggle='offcanvas'>
    <section class="sidebar">
        <div class="w-80px mt-3 mb-3 ml-3">
            <img src="assets/img/basic/logo.png" alt="">
        </div>
        <div class="relative">
            <a data-toggle="collapse" href="#userSettingsCollapse" role="button" aria-expanded="false"
               aria-controls="userSettingsCollapse" class="btn-fab btn-fab-sm absolute fab-right-bottom fab-top btn-primary shadow1 ">
                <i class="icon icon-cogs"></i>
            </a>
            <div class="user-panel p-3 light mb-2">
                <div>
                    <div class="float-left image">
                        <img class="user_avatar" src="assets/img/dummy/u2.png" alt="User Image">
                    </div>
                    <div class="float-left info">
                        <h6 class="font-weight-light mt-2 mb-1">Alexander Pierce</h6>
                        <a href="#"><i class="icon-circle text-primary blink"></i> Online</a>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="collapse multi-collapse" id="userSettingsCollapse">
                    <div class="list-group mt-3 shadow">
                        <a href="index.html" class="list-group-item list-group-item-action ">
                            <i class="mr-2 icon-umbrella text-blue"></i>Profile
                        </a>
                        <a href="#" class="list-group-item list-group-item-action"><i
                                class="mr-2 icon-cogs text-yellow"></i>Settings</a>
                        <a href="#" class="list-group-item list-group-item-action"><i
                                class="mr-2 icon-security text-purple"></i>Change Password</a>
                    </div>
                </div>
            </div>
        </div>
        <ul class="sidebar-menu">
            <li class="header"><strong>MAIN NAVIGATION</strong></li>
            <li class="treeview"><a href="#">
                <i class="icon icon-sailing-boat-water purple-text s-18"></i> <span>Dashboard</span> <i
                    class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li><a href="index.html"><i class="icon icon-folder5"></i>Panel Dashboard 1</a>
                    </li>
                    <li><a href="panel-page-dashboard1-rtl.html"><i class="icon icon-folder5"></i>Panel Dashboard 1 - RTL</a>
                    </li>
                    <li><a href="panel-page-dashboard2.html"><i class="icon icon-folder5"></i>Panel Dashboard 2</a>
                    </li>
                    <li><a href="panel-page-dashboard3.html"><i class="icon icon-folder5"></i>Panel Dashboard 3</a>
                    </li>
                    <li><a href="panel-page-dashboard4.html"><i class="icon icon-folder5"></i>Panel Dashboard 4</a>
                    </li>
                    <li><a href="panel-page-dashboard5.html"><i class="icon icon-folder5"></i>Panel Dashboard 5</a>
                    </li>
                    <li><a href="panel-page-dashboard6.html"><i class="icon icon-folder5"></i>Panel Dashboard 6</a>
                    </li>
                    <li><a href="panel-page-dashboard7.html"><i class="icon icon-folder5"></i>Panel Dashboard 7</a>
                    </li>
                    <li><a href="panel-page-dashboard9.html"><i class="icon icon-folder5"></i>Panel Dashboard 9</a>
                    </li>

                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon icon-package blue-text s-18"></i>
                <span>Products</span>
                <span class="badge r-3 badge-primary pull-right">4</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-products.html"><i class="icon icon-circle-o"></i>All Products</a>
                    </li>
                    <li><a href="panel-page-products-create.html"><i class="icon icon-add"></i>Add
                        New </a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#"><i class="icon icon-account_box light-green-text s-18"></i>Users<i
                    class="icon icon-angle-left s-18 pull-right"></i></a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-users.html"><i class="icon icon-circle-o"></i>All Users</a>
                    </li>
                    <li><a href="panel-page-users-create.html"><i class="icon icon-add"></i>Add User</a>
                    </li>
                    <li><a href="panel-page-profile.html"><i class="icon icon-user"></i>User Profile </a>
                    </li>
                </ul>
            </li>
            <li class="treeview no-b"><a href="#">
                <i class="icon icon-package light-green-text s-18"></i>
                <span>Inbox</span>
                <span class="badge r-3 badge-success pull-right">20</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-inbox.html"><i class="icon icon-circle-o"></i>All Messages</a>
                    </li>
                    <li><a href="panel7-inbox.html"><i class="icon icon-circle-o"></i>Panel7 - Inbox</a>
                    </li>
                    <li><a href="panel8-inbox.html"><i class="icon icon-circle-o"></i>Panel8 - Inbox</a>
                    </li>
                    <li><a href="panel-page-inbox-create.html"><i class="icon icon-add"></i>Compose</a>
                    </li>
                </ul>
            </li>
            <li class="header light mt-3"><strong>UI COMPONENTS</strong></li>
            <li class="treeview ">
                <a href="#">
                    <i class="icon icon-package text-lime s-18"></i> <span>Apps</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-chat.html"><i class="icon icon-circle-o"></i>Chat</a>
                    </li>
                    <li><a href="panel7-tasks.html"><i class="icon icon-circle-o"></i>Tasks / Todo</a>
                    </li>
                    <li><a href="panel-page-calendar.html"><i class="icon icon-date_range"></i>Calender</a>
                    </li>
                    <li><a href="panel-page-calendar2.html"><i class="icon icon-date_range"></i>Calender 2</a>
                    </li>
                    <li><a href="panel-page-contacts.html"><i class="icon icon-circle-o"></i>Contacts</a>
                    </li>
                    <li><a href="panel1-projects.html"><i class="icon icon-circle-o"></i>Panel1 - Projects</a>
                    </li>
                    <li><a href="panel7-projects-list.html"><i class="icon icon-circle-o"></i>Panel7 - Projects List</a>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="icon icon-documents3 text-blue s-18"></i> <span>Pages</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="icon icon-documents3"></i>Blank Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-blank.html"><i class="icon icon-document"></i>Simple Blank</a>
                            </li>
                            <li><a href="panel-page-blank-tabs.html"><i class="icon icon-document"></i>Tabs Blank <i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-fingerprint text-green"></i>Auth Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="login.html"><i class="icon icon-document"></i>Login Page 1</a>
                            </li>
                            <li><a href="login-2.html"><i class="icon icon-document"></i>Login Page 2</a>
                            </li>
                            <li><a href="login-3.html"><i class="icon icon-document"></i>Login Page 3</a>
                            </li>
                            <li><a href="login-4.html"><i class="icon icon-document"></i>Login Page 4</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-bug text-red"></i>Error Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-404.html"><i class="icon icon-document"></i>404 Page</a>
                            </li>
                            <li><a href="panel-page-500.html"><i class="icon icon-document"></i>500 Page<i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                            <li><a href="panel-page-error.html"><i class="icon icon-document"></i>420 Page<i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-documents3"></i>Other Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-invoice.html"><i class="icon icon-document"></i>Invoice Page</a>
                            </li>
                            <li><a href="panel-page-no-posts.html"><i class="icon icon-document"></i>No Post Page</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="icon icon-goals-1 amber-text s-18"></i> <span>Elements</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-widgets.html">
                        <i class="icon icon-widgets amber-text s-14"></i> <span>Widgets</span>
                    </a>
                    </li>
                    <li><a href="panel-element-counters.html">
                        <i class="icon icon-filter_9_plus amber-text s-14"></i> <span>Counters</span>
                    </a>
                    <li><a href="panel-element-buttons.html">
                        <i class="icon icon-touch_app amber-text s-14"></i> <span>Buttons</span>
                    </a>
                    </li>
                    <li>
                        <a href="panel-element-typography.html">
                            <i class="icon icon-text-width amber-text s-14"></i> <span>Typography</span>
                        </a>
                    </li>
                    <li><a href="panel-element-tabels.html">
                        <i class="icon icon-table amber-text s-14"></i> <span>Tables</span>
                    </a>
                    </li>
                    <li><a href="panel-element-alerts.html">
                        <i class="icon icon-exclamation-circle amber-text s-14"></i> <span>Alerts</span>
                    </a>
                    </li>
                    <li><a href="panel-element-slider.html"><i class="icon icon-view_carousel amber-text s-14"></i>
                        <span>Slider</span></a></li>
                    <li><a href="panel-element-tabs.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Tabs</span></a></li>
                    <li><a href="panel-element-progress-bars.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Progress Bars</span></a></li>
                    <li><a href="panel-element-badges.html"><i class="icon icon-flag7 amber-text s-14"></i>
                        <span>Badges</span></a></li>
                    <li><a href="panel-element-preloaders.html"><i class="icon icon-data_usage amber-text s-14"></i>
                        <span>Preloaders</span></a></li>
                </ul>
            </li>
            <li class="treeview ">
                <a href="#">
                    <i class="icon icon-wpforms light-green-text s-18 "></i> <span>Forms & Plugins</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-forms.html"><i class="icon icon-wpforms light-green-text"></i>Bootstrap
                        Inputs</a>
                    </li>
                    <li><a href="form-jquery-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Jquery)</a>
                    </li>
                    <li><a href="form-bootstrap-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Bootstrap)</a>
                    </li>
                    <li><a href="panel-element-editor.html"><i class="icon icon-pen2 light-green-text"></i>Editor</a>
                    </li>
                    <li><a href="panel-element-toast.html"><i
                            class="icon icon-notifications_active light-green-text"></i>Toasts</a>
                    </li>
                    <li><a href="panel-element-stepper.html"><i class="icon icon-burst_mode light-green-text"></i>Stepper</a>
                    </li>
                    <li><a href="panel-element-date-time-picker.html"><i
                            class="icon icon-date_range light-green-text"></i>Date Time Picker</a>
                    </li>
                    <li><a href="panel-element-color-picker.html"><i class="icon icon-adjust light-green-text"></i>Color
                        Picker</a>
                    </li>
                    <li><a href="panel-element-range-slider.html"><i class="icon icon-space_bar light-green-text"></i>Range
                        Slider</a>
                    </li>
                    <li><a href="panel-element-select2.html"><i
                            class="icon  icon-one-finger-click light-green-text"></i>Select 2</a>
                    </li>
                    <li><a href="panel-element-tags.html"><i class="icon  icon-tags3 light-green-text"></i>Tags</a>
                    </li>
                    <li><a href="panel-element-data-tables.html"><i class="icon icon-table light-green-text"></i>Data
                        Tables</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon-bar-chart2 pink-text s-18"></i>
                <span>Charts</span>
                <i class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-charts-js.html"><i class="icon icon-area-chart pink-text s-14"></i><span>Charts.Js</span></a>
                    </li>
                    <li>
                        <a href="panel-element-morris.html"><i class="icon icon-bubble_chart pink-text s-14"></i>Morris
                            Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-echarts.html">
                            <i class="icon icon-bar-chart-o pink-text s-14"></i>Echarts</a>
                    </li>
                    <li>
                        <a href="panel-element-easy-pie-charts.html">
                            <i class="icon icon-area-chart pink-text s-14"></i>Easy Pie Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-jqvmap.html">
                            <i class="icon icon-map pink-text s-14"></i>Jqvmap</a>
                    </li>
                    <li>
                        <a href="panel-element-sparklines.html">
                            <i class="icon icon-line-chart2 pink-text s-14"></i>Sparklines</a>
                    </li>
                    <li>
                        <a href="panel-element-float.html">
                            <i class="icon icon-pie-chart pink-text s-14"></i>Float Charts</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon-dialpad blue-text  s-18"></i>
                <span>Extra</span>
                <i class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-letters.html">
                            <i class="icon icon-brightness_auto light-blue-text s-14"></i>
                            <span>Avatar Placeholders</span>
                        </a>
                    </li>
                    <li>
                        <a href="panel-element-icons.html">
                            <i class="icon icon-camera2 light-blue-text s-14"></i> <span>Icons</span>
                        </a>
                    </li>
                    <li><a href="panel-element-colors.html">
                        <i class="icon icon-palette light-blue-text s-14"></i> <span>Colors</span>
                    </a>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</aside>
<!--Sidebar End-->
<div class="has-sidebar-left">
    <div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark pt-2 pb-2 pl-4 pr-2">
            <div class="search-bar">
                <input class="transparent s-24 text-white b-0 font-weight-lighter w-128 height-50" type="text"
                       placeholder="start typing...">
            </div>
            <a href="#" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-expanded="false"
               aria-label="Toggle navigation" class="paper-nav-toggle paper-nav-white active "><i></i></a>
        </div>
    </div>
</div>
    <div class="sticky">
        <div class="navbar navbar-expand navbar-dark d-flex justify-content-between bd-navbar blue accent-3">
            <div class="relative">
                <a href="#" data-toggle="push-menu" class="paper-nav-toggle pp-nav-toggle">
                    <i></i>
                </a>
            </div>
            <!--Top Menu Start -->
<div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
        <!-- Messages-->
        <li class="dropdown custom-dropdown messages-menu">
            <a href="#" class="nav-link" data-toggle="dropdown">
                   <i class="icon-message "></i>
                   <span class="badge badge-success badge-mini rounded-circle">4</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu pl-2 pr-2">
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u4.png" alt="">
                                    <span class="avatar-badge busy"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u1.png" alt="">
                                    <span class="avatar-badge online"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u2.png" alt="">
                                    <span class="avatar-badge idle"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u3.png" alt="">
                                    <span class="avatar-badge busy"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                    </ul>
                </li>
                <li class="footer s-12 p-2 text-center"><a href="#">See All Messages</a></li>
            </ul>
        </li>
        <!-- Notifications -->
        <li class="dropdown custom-dropdown notifications-menu">
            <a href="#" class=" nav-link" data-toggle="dropdown" aria-expanded="false">
                <i class="icon-notifications "></i>
                <span class="badge badge-danger badge-mini rounded-circle">4</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li class="header">You have 10 notifications</li>
                <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-success"></i> 5 new members joined today
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-danger"></i> 5 new members joined today
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-yellow"></i> 5 new members joined today
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="footer p-2 text-center"><a href="#">View all</a></li>
            </ul>
        </li>
        <li>
            <a class="nav-link " data-toggle="collapse" data-target="#navbarToggleExternalContent"
               aria-controls="navbarToggleExternalContent"
               aria-expanded="false" aria-label="Toggle navigation">
                <i class=" icon-search3 "></i>
            </a>
        </li>
        <!-- Right Sidebar Toggle Button -->
        <li>
            <a class="nav-link ml-2" data-toggle="control-sidebar">
                <i class="icon-tasks "></i>
            </a>
        </li>
        <!-- User Account-->
        <li class="dropdown custom-dropdown user user-menu ">
            <a href="#" class="nav-link" data-toggle="dropdown">
                <img src="assets/img/dummy/u8.png" class="user-image" alt="User Image">
                <i class="icon-more_vert "></i>
            </a>
            <div class="dropdown-menu p-4 dropdown-menu-right">
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-apps purple lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Apps</div>
                        </a>
                    </div>
                    <div class="col"><a href="#">
                        <i class="icon-beach_access pink lighten-1 avatar  r-5"></i>
                        <div class="pt-1">Profile</div>
                    </a></div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting indigo lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-star light-green lighten-1 avatar  r-5"></i>
                            <div class="pt-1">Favourites</div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-save2 orange accent-1 avatar  r-5"></i>
                            <div class="pt-1">Saved</div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting grey darken-3 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
                <hr>
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-apps purple lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Apps</div>
                        </a>
                    </div>
                    <div class="col"><a href="#">
                        <i class="icon-beach_access pink lighten-1 avatar  r-5"></i>
                        <div class="pt-1">Profile</div>
                    </a></div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting indigo lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
        </div>
    </div>
</div>
<div class="page has-sidebar-left">
    <header class="blue accent-3 relative nav-sticky">
        <div class="container-fluid text-white">
            <div class="row p-t-b-10 ">
                <div class="col">
                    <h4>
                        <i class="icon-area-chart"></i>
                        Widgets
                    </h4>
                </div>
            </div>
        </div>
    </header>
    <div class="container-fluid  my-3">
        <div class="row">
            <div class="col-md-6">
                <div class="card ">
                    <div class="card-header white">
                        <i class="icon-clipboard-edit blue-text"></i>
                        <strong> CONTACTS </strong>
                    </div>
                    <div class="card-body p-0 bg-light slimScroll" data-height="300">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <!-- Table heading -->
                                <tbody>
                                <tr class="no-b">
                                    <th>
                                        <input type="checkbox">
                                    </th>
                                    <th>Page Title</th>
                                    <th>File Size</th>
                                    <th>Status</th>
                                    <th>Sort</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <!-- Check box -->
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <!-- Page name -->
                                    <td>
                                        <a href="#">About Us</a>
                                    </td>
                                    <!-- Page size -->
                                    <td>253.4 KB</td>
                                    <!-- Status -->
                                    <td>
                                        <span class="badge badge-danger r-5">R</span>
                                    </td>
                                    <!-- Sort -->
                                    <td>
                                        <a href="#">
                                            <i class="icon-chevron-up text-success"></i>
                                        </a>
                                    </td>
                                    <!-- Actions -->
                                    <td>
                                        <a href="#">
                                            <i class="icon-edit"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-share-square-o text-success"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-close2 text-danger-o text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <a href="#">Contact Us</a>
                                    </td>
                                    <td>213 KB</td>
                                    <td>
                                        <span class="badge badge-success r-5">A</span>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-chevron-up text-danger"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-edit lblue-text"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-share-square-o text-success"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-close2 text-danger-o text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <a href="#">Dashboard</a>
                                    </td>
                                    <td>1.24 MB</td>
                                    <td>
                                        <span class="badge badge-warning r-5">P</span>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-chevron-up text-success"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-edit lblue"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-share-square-o text-success"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-close2 text-danger-o text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <a href="#">Download</a>
                                    </td>
                                    <td>30.00 MB</td>
                                    <td>
                                        <span class="badge badge-warning r-5 yellow">R</span>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-chevron-up text-danger"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-edit lblue"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-share-square-o text-success"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-close2 text-danger-o text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <a href="#">Portfolio</a>
                                    </td>
                                    <td>140 MB</td>
                                    <td>
                                        <span class="badge badge-warning r-5 purple">A</span>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-chevron-up text-success"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-edit lblue"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-share-square-o text-success"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-close2 text-danger-o text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <a href="#">Contact Us</a>
                                    </td>
                                    <td>213 KB</td>
                                    <td>
                                        <span class="badge badge-primary r-5">P</span>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-chevron-up text-success"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <i class="icon-edit lblue"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-share-square-o text-success"></i>
                                        </a> &nbsp;
                                        <a href="#">
                                            <i class="icon-close2 text-danger-o text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer white">
                        <a href="#" class="btn btn-outline-primary btn-xs">Add New Contact</a>
                        <a href="#" class="btn btn-outline-danger btn-xs">Delete All</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header white">
                        <i class="icon-clipboard-edit blue-text"></i>
                        <strong> CONTACTS </strong>
                    </div>
                    <div class="card-body pt-0 bg-light slimScroll" data-height="300">
                        <ul class="list-unstyled">
                            <!-- Alphabet with number of contacts -->
                            <li class="pt-3 pb-3 bg-light sticky">
                                <strong>A</strong>
                                <span class="badge r-3 badge-success float-right">20</span>
                            </li>
                            <!-- Single contact -->
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u1.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u6.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u6.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="pt-3 pb-3 bg-light sticky">
                                <strong>B</strong>
                                <span class="badge r-3 badge-danger float-right">20</span>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u2.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u3.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u4.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="list-unstyled">
                            <!-- Alphabet with number of contacts -->
                            <li class="pt-3 pb-3 bg-light sticky">
                                <strong>C</strong>
                                <span class="badge r-3 badge-success float-right">20</span>
                            </li>
                            <!-- Single contact -->
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u1.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u6.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u6.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-4">
                                <strong>B</strong>
                                <span class="badge r-3 badge-danger float-right">20</span>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u2.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u3.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="my-1">
                                <div class="card no-b p-3">
                                    <div class="">
                                        <div class="float-right">
                                            <a href="#" class="btn-fab btn-fab-sm btn-primary r-5">
                                                <i class="icon-mail-envelope-closed2 p-0"></i>
                                            </a>
                                            <a href="#" class="btn-fab btn-fab-sm btn-success r-5">
                                                <i class="icon-star p-0"></i>
                                            </a>
                                        </div>
                                        <div class="image mr-3  float-left">
                                            <img class="w-40px" src="assets/img/dummy/u4.png" alt="User Image">
                                        </div>
                                        <div>
                                            <div>
                                                <strong>Alexander Pierce</strong>
                                            </div>
                                            <small> alexander@paper.com</small>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="card-footer white">
                        300 Contacts
                        <a href="#" class="btn btn-sm btn-danger float-right">Add New Contact</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row row-eq-height my-3">
            <!-- Social Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> SOCIAL MEDIA </strong>
                    </div>
                    <div class="card-body">
                        <ul class="social">
                            <li>
                                <a href="#" class="facebook mr-3">
                                    <i class="icon-facebook"></i>
                                </a> Facebook
                                <span class="float-right mt-2 font-weight-bold">10%</span>
                            </li>
                            <li>
                                <a href="#" class="youtube mr-3">
                                    <i class="icon-youtube"></i>
                                </a>Youtube
                                <span class="float-right mt-2 font-weight-bold">20%</span>
                            </li>
                            <li>
                                <a href="#" class="twitter mr-3">
                                    <i class="icon-twitter"></i>
                                </a>Twitter
                                <span class="float-right mt-2 font-weight-bold">50%</span>
                            </li>
                            <li>
                                <a href="#" class="instagram mr-3">
                                    <i class="icon-instagram"></i>
                                </a>Instagram
                                <span class="float-right mt-2 font-weight-bold">5%</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Social Widget End -->
            <!-- Product Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> Product </strong>
                    </div>
                    <div class="card-body">
                        <!-- Big Heading -->
                        <div class="text-center">
                            <h3 class="my-3">$25,000</h3>
                            <i class="icon-angle-double-up yellow avatar cirlce"></i>
                        </div>
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>
                                    <i class="icon-circle-o text-red mr-2"></i>Sales</p>
                                <p>
                                    <i class="icon-circle-o text-green mr-2"></i>Last Month</p>
                            </div>
                            <div>
                                <p>
                                    <i class="icon-angle-double-down text-red mr-2"></i>1,4,348</p>
                                <p>
                                    <i class="icon-angle-double-up text-green mr-2"></i>1,11,5</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Product Widget End -->
            <!-- Progress Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> Progress </strong>
                    </div>
                    <div class="card-body pt-0">
                        <div class="my-3">
                            <small>25% Complete</small>
                            <div class="progress" style="height: 3px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%;"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="my-3">
                            <small>45% Complete</small>
                            <div class="progress" style="height: 3px;">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 45%;"
                                     aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="my-3">
                            <small>60% Complete</small>
                            <div class="progress" style="height: 3px;">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;"
                                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="my-3">
                            <small>75% Complete</small>
                            <div class="progress" style="height: 3px;">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 75%;"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="my-3">
                            <small>100% Complete</small>
                            <div class="progress" style="height: 3px;">
                                <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Progress Widget End -->
            <!-- Visitors Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> Visitors </strong>
                    </div>
                    <div class="card-body">
                        <div class="circular-progressbar ">
                            <input type='text' value="50" data-thickness="0.2" data-width="100" data-bgColor="#eee"
                                   data-fgColor="#F25E5E">
                            <div class="mt-3 text-center">
                                <h5 class="heading">Traffic</h5>
                                <span>Direct Visitors</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Visitors Widget End -->
        </div>
        <div class="row row-eq-height my-3">
            <!-- Social Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> USER WIDGET </strong>
                    </div>
                    <div class="card-body text-center">
                        <div class="image m-3">
                            <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u1.png" alt="User Image">
                        </div>
                        <div>
                            <h6 class="p-t-10">Alexander Pierce</h6>
                            alexander@paper.com
                        </div>
                        <a href="#" class="btn btn-success btn-sm mt-3">View Profile</a>
                    </div>
                </div>
            </div>
            <!-- Social Widget End -->
            <!-- Product Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header  white">
                        <strong> Product </strong>
                    </div>
                    <div class="card-body p-0">
                        <!-- Big Heading -->
                        <div class="text-center bg-light b-b p-3">
                            <h3 class="my-3">$25,000</h3>
                            <i class="icon-angle-double-up bg-success  mr-2 avatar cirlce"></i>
                            <i class="icon-angle-double-down bg-danger avatar cirlce"></i>
                        </div>
                        <ul class="list-group list-group-flush no-b">
                            <li class="list-group-item">
                                <i class="icon-notifications text-blue"></i> justo odio
                            </li>
                        </ul>
                    </div>
                    <div class="card-footer white">
                        <a href="#" class="btn btn-outline-primary btn-xs">Add New Contact</a>
                        <a href="#" class="btn btn-outline-danger btn-xs">Delete All</a>
                    </div>
                </div>
            </div>
            <!-- Product Widget End -->
            <!-- Progress Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> LIST WIDGET </strong>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <i class="icon icon-home text-blue"></i> justo odio
                            </li>
                            <li class="list-group-item">
                                <i class="icon icon-home text-yellow"></i>Dapibus ac facilisis in
                            </li>
                            <li class="list-group-item">
                                <i class="icon icon-home text-purple"></i>Vestibulum at eros
                            </li>
                            <li class="list-group-item">
                                <i class="icon icon-home text-red"></i>Dapibus ac facilisis in
                            </li>
                            <li class="list-group-item">
                                <i class="icon icon-home text-green"></i>Vestibulum at eros
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Progress Widget End -->
            <!-- Setting Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">
                        <strong> Settings </strong>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group no-b">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="icon icon-wifi purple-text"></i>Wifi
                                </div>
                                <div class="material-switch">
                                    <input id="sw1" name="someSwitchOption001"  type="checkbox"/>
                                    <label for="sw1" class="bg-primary"></label>
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="icon icon-cogs text-blue"></i>Email
                                </div>
                                <div class="material-switch">
                                    <input id="sw2" name="someSwitchOption001"  type="checkbox"/>
                                    <label for="sw2" class="bg-secondary"></label>
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="icon icon-accessible pink-text"></i> Accessible
                                </div>
                                <div class="material-switch">
                                    <input id="sw3" name="someSwitchOption001"  type="checkbox"/>
                                    <label for="sw3" class="bg-danger"></label>
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="icon icon-ac_unit text-green"></i> AC Unit
                                </div>
                                <div class="material-switch">
                                    <input id="sw4" name="someSwitchOption001"  type="checkbox"/>
                                    <label for="sw4" class="bg-warning"></label>
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="icon icon-security text-danger"></i> Security
                                </div>
                                <div class="material-switch">
                                    <input id="sw5" name="someSwitchOption001"  type="checkbox"/>
                                    <label for="sw5" class="bg-default"></label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Settings Widget End -->
        </div>
        <div class="row row-eq-height my-3">
            <!-- Line Chart Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">More Spark Charts With Charts JS</div>
                    <div class="card-body p-0">
                        <div class="bg-primary text-white lighten-2">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>960</span>
                                <div class="float-right">
                                    <span class="icon icon-chart s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="bar"
                                    data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                                    data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Line Chart Widget End -->
            <!-- Line Chart Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">More Spark Charts With Charts JS</div>
                    <div class="card-body p-0">
                        <div class="lighten-2">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>
                                    <span class="sc-counter">960</span>
                                </span>
                                <div class="float-right">
                                    <span class="icon icon-arrow_downward s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="line"
                                    data-dataset="[[0,95,228,100,528,400,0]]"
                                    data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                    data-dataset-options="[
                                            { borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            ]">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Line Chart Widget End -->
            <!-- Product Widget Start -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">More Spark Charts With Charts JS</div>
                    <div class="card-body p-0">
                        <div class="lighten-2 bg-light">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>
                                    <span class="sc-counter">960</span>
                                </span>
                                <div class="float-right">
                                    <span class="icon icon-arrow_downward s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="line" data-dataset="[
                                            [0,528,228,728,528,1628,0],
                                            [0,628,228,1228,428,1828,0],
                                            ]" data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                    data-dataset-options="[
                                            { borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            { borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 1)' }

                                            ]" style="width: 189px; height: 47px;">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header white">More Spark Charts With Charts JS</div>
                    <div class="card-body p-0">
                        <div class="bg-primary text-white lighten-2">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>960</span>
                                <div class="float-right">
                                    <span class="icon icon-chart s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="line"
                                    data-dataset="[[28,530,200,430]]" data-labels="['a','b','c','d']"
                                    data-dataset-options="[
                                            { borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            ]">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row my-3">
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-header white">
                        <h6>ACTIVITIES WIDGET</h6>
                    </div>
                    <div class="card-body slimScroll" data-height="400">
                        <div class="activity-item activity-primary">
                            <div class="activity-content">
                                <small class="text-muted">
                                    <i class="icon icon-user position-left"></i> 5 mins ago
                                </small>
                                <p>Lorem ipsum dolor sit amet conse ctetur which ascing elit users.</p>
                            </div>
                        </div>
                        <div class="activity-item activity-danger">
                            <div class="activity-content">
                                <small class="text-muted">
                                    <i class="icon icon-user position-left"></i> 8 mins ago
                                </small>
                                <p>Lorem ipsum dolor sit ametcon the sectetur that ascing elit users.</p>
                            </div>
                        </div>
                        <div class="activity-item activity-success">
                            <div class="activity-content">
                                <small class="text-muted">
                                    <i class="icon icon-user position-left"></i> 10 mins ago
                                </small>
                                <p>Lorem ipsum dolor sit amet cons the ecte tur and adip ascing elit users.</p>
                            </div>
                        </div>
                        <div class="activity-item activity-warning">
                            <div class="activity-content">
                                <small class="text-muted">
                                    <i class="icon icon-user position-left"></i> 12 mins ago
                                </small>
                                <p>Lorem ipsum dolor sit amet consec tetur adip ascing elit users.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card todo-widget">
                    <div class="card-header white">
                        <h6> TO-DO LIST</h6>
                    </div>
                    <div class="card-body p-0 slimScroll" data-height="350">
                        <ul class="list-group list-group-striped no-b">
                            <li class="list-group-item list-group-item-action">
                                <span class="float-right">
                                    <i class="icon-close2 text-danger"></i>
                                </span>Study for CS-265 Final
                            </li>
                            <li class="list-group-item list-group-item-action">
                                <span class="float-right">
                                    <i class="icon-close2 text-danger"></i>
                                </span>Submit Research Paper
                                <span class="badge badge-primary r-3 ml-3">Urgent Task</span>
                            </li>
                            <li class="list-group-item list-group-item-action done">
                                <span class="float-right">
                                    <i class="icon-close2 text-danger"></i>
                                </span>Prepare Last COM-101 Presentation
                            </li>
                            <li class="list-group-item list-group-item-action">
                                <span class="float-right">
                                    <i class="icon-close2 text-danger"></i>
                                </span>Refresh on Rails
                            </li>
                            <li class="list-group-item list-group-item-action done">
                                <span class="float-right">
                                    <i class="icon-close2 text-danger"></i>
                                </span>Begin to learn one: Node, Angular, Express
                                <span class="badge badge-success r-3 ml-3">Done</span>
                            </li>
                            <li class="list-group-item list-group-item-action">
                                <span class="float-right">
                                    <i class="icon-close2 text-danger"></i>
                                </span>Think: Ideas for winter break project
                            </li>
                        </ul>
                    </div>
                    <div class="card-footer white">
                        <div class="input-group">
                            <input id="new-event" type="text" class="form-control r-30 light"
                                   placeholder="Add A New To-Do">
                            <div class="input-group-btn">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card">
                    <div class="card-header white">
                        <h6>CHAT WIDGET</h6>
                    </div>
                    <div class="card-body  chat-widget p-3 slimScroll" data-height="350">
                        <div class="w-body w-scroll">
                            <ul class="list-unstyled">
                                <!-- Chat by us. Use the class "by-me". -->
                                <li class="by-me">
                                    <!-- Use the class "float-left" in avatar -->
                                    <div class="avatar float-left">
                                        <!-- Online or offline -->
                                        <b class="c-idle"></b>
                                        <img src="assets/img/dummy/u5.png" alt="" class="img-responsive">
                                        <!-- Name -->
                                        <span>Ashok</span>
                                    </div>
                                    <div class="chat-content">
                                        <!-- In meta area, first include "name" and then "time" -->
                                        <div class="chat-meta">Sent
                                            <span class="float-right">3 hours ago</span>
                                        </div>
                                        Vivamus diam elit diam, consectetur dapibus adipiscing elit. Duis dolor sit eut
                                        purus dolor feugiat sit interum euis.
                                        <div class="clearfix"></div>
                                    </div>
                                </li>
                                <!-- Chat by other. Use the class "by-other". -->
                                <li class="by-other">
                                    <!-- Use the class "float-right" in avatar -->
                                    <div class="avatar float-right">
                                        <!-- Online or offline -->
                                        <b class="c-off"></b>
                                        <img src="assets/img/dummy/u4.png" alt="" class="img-responsive">
                                        <!-- Name -->
                                        <span>Ravi</span>
                                    </div>
                                    <div class="chat-content">
                                        <!-- In the chat meta, first include "time" then "name" -->
                                        <div class="chat-meta">3 hours ago
                                            <span class="float-right">Received</span>
                                        </div>
                                        Vivamus diam elit diam, consectetur elit. Ut non dolor sit feu sit amet dolor
                                        feugiat sit consequat.
                                        <div class="clearfix"></div>
                                    </div>
                                </li>
                                <li class="by-me">
                                    <div class="avatar float-left">
                                        <b class="c-on"></b>
                                        <img src="assets/img/dummy/u5.png" alt="" class="img-responsive">
                                        <span>Ashok</span>
                                    </div>
                                    <div class="chat-content">
                                        <div class="chat-meta">Seen
                                            <span class="float-right">4 hours ago</span>
                                        </div>
                                        Lorem dolor sit sit amet dolor feugiat sit adipiscing elit.
                                        <div class="clearfix"></div>
                                    </div>
                                </li>
                                <li class="by-other">
                                    <!-- Use the class "float-right" in avatar -->
                                    <div class="avatar float-right">
                                        <b class="c-off"></b>
                                        <img src="assets/img/dummy/u4.png" alt="" class="img-responsive">
                                        <span>Ravi</span>
                                    </div>
                                    <div class="chat-content">
                                        <!-- In the chat meta, first include "time" then "name" -->
                                        <div class="chat-meta">3 hours ago
                                            <span class="float-right">Undelivered</span>
                                        </div>
                                        Vivamus diam elit diam, consectetur fpibus adipiscing elit. Duis dolor sit eut
                                        purus dolor feugiat sit interum euis.
                                        <div class="clearfix"></div>
                                    </div>
                                </li>
                                <li class="by-me">
                                    <div class="avatar float-left">
                                        <b class="c-on"></b>
                                        <img src="assets/img/dummy/u3.png" alt="" class="img-responsive">
                                        <span>Ashok</span>
                                    </div>
                                    <div class="chat-content">
                                        <div class="chat-meta">Audio
                                            <span class="float-right">4 hours ago</span>
                                        </div>
                                        Vivamus diam eget, Vivamus consectetur dapibus adipiscing elit.
                                        <div class="clearfix"></div>
                                    </div>
                                </li>
                                <li class="by-other">
                                    <!-- Use the class "float-right" in avatar -->
                                    <div class="avatar float-right">
                                        <b class="c-off"></b>
                                        <img src="assets/img/dummy/u2.png" alt="" class="img-responsive">
                                        <span>Ravi</span>
                                    </div>
                                    <div class="chat-content">
                                        <!-- In the chat meta, first include "time" then "name" -->
                                        <div class="chat-meta">3 hours ago
                                            <span class="float-right">Image</span>
                                        </div>
                                        Duis dolor sit eut purus dolor feugius diam elit diam, consecsectetur dapibus
                                        adipiscing elit.
                                        <div class="clearfix"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-footer bg-light">
                        <!-- Chat button -->
                        <form>
                            <div class="input-group">
                                <input class="form-control" placeholder="Type your message..." type="text">
                                <span class="input-group-btn">
                                    <button type="submit" class="btn btn-primary">Send</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- .card -->
        <div class="card my-3">
            <!-- .card-body -->
            <div class="card-body">
                <h4 class="card-title"> Breadcrumbs </h4>
                <hr>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active">Home</li>
                </ol>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Library</li>
                </ol>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">Home</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#">Library</a>
                    </li>
                    <li class="breadcrumb-item active">Data</li>
                </ol>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

        <!-- .card -->
        <div class="card my-3">
            <!-- .card-body -->
            <div class="card-body">
                <h4 class="card-title"> Paginations </h4>
                <hr>
                <div class="el-example">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#">«</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">»</a>
                        </li>
                    </ul>
                </div>
                <div class="el-example">
                    <ul class="pagination pagination-sm">
                        <li class="page-item disabled">
                            <a class="page-link" href="#">«</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">»</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

        <div class="row text-center h-100 pt-3 pb-3">
            <div class="col text-center my-auto">
                <div class="card card-block d-flex" style="height: 275px">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <div>
                            <h5 class="card-title">Card With Border</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This
                                content is a little bit longer.</p>
                            <p class="card-text">Last updated 3 mins ago</p>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
            <div class="col text-center my-auto">
                <div class="card card-block d-flex no-b" style="height: 275px">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <div>
                            <h5 class="card-title">Plan Card</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This
                                content is a little bit longer.</p>
                            <p class="card-text">Last updated 3 mins ago</p>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
            <div class="col text-center my-auto">
                <div class="card card-block shadow1 d-flex" style="height: 275px">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <div>
                            <h5 class="card-title">Card With Border</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This
                                content is a little bit longer.</p>
                            <p class="card-text">Last updated 3 mins ago</p>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
            <div class="col text-center my-auto">
                <div class="card card-block shadow d-flex" style="height: 275px">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <div>
                            <h5 class="card-title">Card With Border</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This
                                content is a little bit longer.</p>
                            <p class="card-text">Last updated 3 mins ago</p>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
            <div class="col text-center my-auto">
                <div class="card card-block shadow2 d-flex" style="height: 275px">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <div>
                            <h5 class="card-title">Card With Border</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This
                                content is a little bit longer.</p>
                            <p class="card-text">Last updated 3 mins ago</p>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row pt-3 pb-3">
            <div class="col">
                <div class="card">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-group pt-3 pb-3">
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p8.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p9.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional
                        content.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p1.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card has
                        even longer content than the first to show that equal height action.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
        </div>
        <div class="card-group pt-3 pb-3">
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p4.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p3.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional
                        content.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p5.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card has
                        even longer content than the first to show that equal height action.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p6.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card has
                        even longer content than the first to show that equal height action.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
        <div class="row pt-3 pb-3">
            <div class="col-6">
                <div class="card text-center">
                    <div class="card-header">
                        <ul class="nav nav-pills card-header-pills">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Active</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#">Disabled</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card text-center">
                    <div class="card-header">
                        Featured
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer text-muted">
                        2 days ago
                    </div>
                </div>
            </div>
        </div>
        <div class="card-columns pt-3 pb-3">
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p2.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                </div>
            </div>
            <div class="card p-3">
                <blockquote class="blockquote mb-0 card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">
                        <small class="text-muted">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card">
                <img class="card-img-top" src="assets/img/demo/portfolio/p9.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional
                        content.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card bg-primary text-white text-center p-3">
                <blockquote class="blockquote mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer class="blockquote-footer">
                        <small class="text-white">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional
                        content.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img" src="assets/img/demo/portfolio/p5.jpg" alt="Card image">
            </div>
            <div class="card p-3 text-right">
                <blockquote class="blockquote mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">
                        <small class="text-muted">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card">
                <div class="p-3">
                    <div class="image mr-3 float-left">
                        <img class="user_avatar" src="assets/img/dummy/u2.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                </div>
                <img src="assets/img/demo/portfolio/p4.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
                <div class="card-body">
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card has
                        even longer content than the first to show that equal height action.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <div class="p-3">
                    <div class="image mr-3  float-right">
                        <img class="user_avatar" src="assets/img/dummy/u1.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                </div>
                <img src="assets/img/demo/portfolio/p5.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
            <div class="card no-b">
                <div class="p-3">
                    <div class="image mr-3 float-left">
                        <img class="user_avatar no-b no-p" src="assets/img/dummy/u2.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                </div>
                <img src="assets/img/demo/portfolio/p5.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
            <div class="card no-b shadow">
                <div class="relative p-3">
                    <div class="image mr-3  float-left">
                        <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u6.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                    <a class="btn-fab fab-right btn-primary text-white shadow2" data-toggle="control-sidebar">
                        <i class="icon-share-alt"></i>
                    </a>
                </div>
                <img src="assets/img/demo/portfolio/p5.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
            <div class="card no-b shadow">
                <div class="relative p-3">
                    <div class="image mr-3  float-left">
                        <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u6.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                    <a class="btn-fab fab-right btn-primary text-white shadow2" data-toggle="control-sidebar">
                        <i class="icon-share-alt"></i>
                    </a>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
            <div class="card no-b shadow">
                <div class="p-3">
                    <div class="image mr-3  float-left">
                        <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u6.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                </div>
            </div>
            <div class="card no-b shadow">
                <div class="p-3">
                    <div class="float-right">
                        <a href="#" class="btn btn-success btn-sm mt-3">View Profile</a>
                    </div>
                    <div class="image mr-3  float-left">
                        <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u6.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                </div>
            </div>
            <div class="card no-b shadow text-center p-5">
                <div class="image mr-3">
                    <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u6.png" alt="User Image">
                </div>
                <div>
                    <h6 class="p-t-10">Alexander Pierce</h6>
                    alexander@paper.com
                </div>
                <a href="#" class="btn btn-success btn-sm mt-3">View Profile</a>
            </div>
            <div class="card shadow">
                <div class="p-3">
                    <div class="float-right">
                        <a href="#" class="btn btn-success btn-sm mt-3">View Profile</a>
                    </div>
                    <div class="image mr-3  float-left">
                        <img class="user_avatar no-b no-p r-5" src="assets/img/dummy/u6.png" alt="User Image">
                    </div>
                    <div>
                        <h6 class="p-t-10">Alexander Pierce</h6>
                        alexander@paper.com
                    </div>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <i class="icon-home2"></i> Home
                    </li>
                    <li class="list-group-item">
                        <i class="icon-envelope-o"></i> Messages
                        <span class="badge badge-primary float-right r-3">3</span>
                    </li>
                    <li class="list-group-item">
                        <i class="icon-profile-2"></i> Profile
                    </li>
                    <li class="list-group-item">
                        <i class="icon-settings2"></i> Settings
                    </li>
                </ul>
            </div>
            <div class="card card-block d-flex">
                <div class="align-items-center d-flex justify-content-center">
                    <img class="card-img" src="assets/img/demo/portfolio/p7.jpg" alt="Card image">
                    <div class="card-img-overlay">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                            additional content. This content
                            is a little bit longer.</p>
                        <p class="card-text">Last updated 3 mins ago</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-3 pb-3">
            <div class="card text-center ">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card border-warning mb-3">
                    <div class="card-header">Header</div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card border-info mb-3">
                    <div class="card-header">Header</div>
                    <div class="card-body text-info">
                        <h5 class="card-title">Info card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card border-light mb-3">
                    <div class="card-header">Header</div>
                    <div class="card-body">
                        <h5 class="card-title">Light card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card border-dark mb-3">
                    <div class="card-header">Header</div>
                    <div class="card-body text-dark">
                        <h5 class="card-title">Dark card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card text-white bg-primary mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-primary">
                        <h5 class="card-title">Primary card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white bg-secondary mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-secondary">
                        <h5 class="card-title">Secondary card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white bg-success mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-success">
                        <h5 class="card-title">Success card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white bg-danger mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-danger">
                        <h5 class="card-title">Danger card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card text-white bg-warning mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white bg-info mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-info">
                        <h5 class="card-title">Info card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card bg-light mb-3">
                    <div class="card-header">Header</div>
                    <div class="card-body">
                        <h5 class="card-title">Light card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white bg-dark mb-3 no-b">
                    <div class="card-header no-b">Header</div>
                    <div class="card-body text-dark">
                        <h5 class="card-title">Dark card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Right Sidebar -->
<aside class="control-sidebar fixed white ">
    <div class="slimScroll">
        <div class="sidebar-header">
            <h4>Activity List</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-3">
            <div>
                <div class="my-3">
                    <small>25% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>45% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 45%;" aria-valuenow="45"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>60% Complete</small>
                    `
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>75% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>100% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 bg-primary text-white">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="font-weight-normal s-14">Sodium</h5>
                    <span class="font-weight-lighter text-primary">Spark Bar</span>
                    <div> Oxygen
                        <span class="text-primary">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <canvas width="100" height="70" data-chart="spark" data-chart-type="bar"
                            data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                            data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n','a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table id="recent-orders" class="table table-hover mb-0 ps-container ps-theme-default">
                <tbody>
                <tr>
                    <td>
                        <a href="#">INV-281281</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 1228.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="sidebar-header">
            <h4>Activity</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-4">
            <div class="activity-item activity-primary">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 5 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet conse ctetur which ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-danger">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 8 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit ametcon the sectetur that ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-success">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 10 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet cons the ecte tur and adip ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-warning">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 12 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet consec tetur adip ascing elit users.</p>
                </div>
            </div>
        </div>
    </div>
</aside>
<!-- /.right-sidebar -->
<!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
<div class="control-sidebar-bg shadow white fixed"></div>
</div>
<!--/#app -->
<script src="assets/js/app.js"></script>
<!--
--- Footer Part - Use Jquery anywhere at page.
--- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
-->
<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>
</body>
</html>